<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport"
				content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>结算页面</title>

	<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>

	<link href="css/demo.css" rel="stylesheet" type="text/css"/>
	<link href="css/cartstyle.css" rel="stylesheet" type="text/css"/>

	<link href="css/jsstyle.css" rel="stylesheet" type="text/css"/>

	<script type="text/javascript" src="../view-api/js/jquery.js"></script>
	<script type="text/javascript" src="js/address.js"></script>

	<script src="../view-api/js/vue.js"></script>

	<!--自定义工具-->
	<script src="../view-api/js/HttpUtil.js"></script>
	<script src="js/Data.js"></script>

</head>

<body>

<!--顶部导航条 -->
<div class="am-container header">
	<ul class="message-l">
		<div class="topMessage">
			<div class="menu-hd" id="AA">
				<a href="login.html" target="_top" class="h" id="a1">亲，请登录</a>
				<a href="register.html" target="_top" id="a2">免费注册</a>
			</div>
		</div>
	</ul>
	<ul class="message-r">
		<div class="topMessage home">
			<div class="menu-hd"><a href="home2.html" target="_top" class="h">商城首页</a></div>
		</div>
		<div class="topMessage my-shangcheng">
			<div class="menu-hd MyShangcheng"><a href="information.html" target="_top"><i
				class="am-icon-user am-icon-fw"></i>个人中心</a></div>
		</div>
		<div class="topMessage mini-cart">
			<div class="menu-hd"><a id="mc-menu-hd" href="myShopCart.html" target="_top"><i
				class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
																																							class="h">0</strong></a>
			</div>
		</div>
		<div class="topMessage favorite">
			<div class="menu-hd"><a href="#" target="_top"><i
				class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
		</div>
		<div class="topMessage favorite">
			<div class="menu-hd"><a href="order.html" target="_top"><i
				class="am-icon-star am-icon-fw"></i><span>个人订单</span></a></div>
		</div>
	</ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
	<div class="logo"><img src="images/logo.png"/></div>
	<div class="logoBig">
		<li><img src="images/logobig.png"/></li>
	</div>

	<div class="search-bar pr">
		<a name="index_none_header_sysc" href="#"></a>
		<form>
			<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
			<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="button">
		</form>
	</div>
</div>

<div class="clear"></div>

<div>
	<div class="concent">
		<!--地址 -->
		<div class="paycont">
			<div class="address">
				<h3>确认收货地址 </h3>

				<div class="clear"></div>
				<ul id="showAdd">
					<div class="per-border"></div>
					<div class="per-border"></div>

				</ul>

				<div class="clear"></div>
			</div>


			<!--订单 -->
			<div class="concent" id="vue_pay">
				<div id="payTable">
					<h3>确认订单信息</h3>
					<div class="cart-table-th">
						<div class="wp">

							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
							<div class="th th-oplist">
								<div class="td-inner">配送方式</div>
							</div>

						</div>
					</div>


					<div v-for="goods in goodsList">
						<tr id="J_BundleList_s_1911116345_1" class="item-list">
							<div id="J_Bundle_s_1911116345_1_0" class="bundle  bundle-last">
								<div class="bundle-main">
									<ul class="item-content clearfix">
										<div class="pay-phone">
											<li class="td td-item">
												<div class="item-pic">
													<a href="#" class="J_MakePoint">
														<img :src="goods.imgUrl" style="height: 80px;"
																 class="itempic J_ItemImg"></a>
												</div>
												<div class="item-info">
													<div class="item-basic-info">
														<a href="#" target="_blank" title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色"
															 class="item-title J_MakePoint" data-point="tbcart.8.11">
															{{goods.goodsName}}</a>
													</div>
												</div>
											</li>

											<li class="td td-price">
												<div class="item-price price-promo-promo">
													<div class="price-content">
														<em class="J_Price price-now">{{goods.price|showPrice }}</em>
													</div>
												</div>
											</li>
										</div>

										<li class="td td-amount">
											<div class="amount-wrapper ">
												<div class="item-amount ">
													<span class="phone-title">{{Number}}</span>
													<div class="sl">

														<p class="text_box" style="width:30px;padding-left:80px">
															{{goods.goodsNumber}}</p>

													</div>
												</div>
											</div>
										</li>
										<li class="td td-sum">
											<div class="td-inner">
												<em tabindex="0" class="J_ItemSum number">{{goods.goodsNumber*goods.price|showPrice}}</em>
											</div>
										</li>
										<li class="td td-oplist">
											<div class="td-inner">
												<span class="phone-title">配送方式</span>
												<div class="pay-logis">
													包邮
												</div>
											</div>
										</li>

									</ul>
									<div class="clear"></div>

								</div>
							</div>
						</tr>

					</div>
					<div class="clear"></div>
					<div class="pay-total">

						<div class="buy-agio">
							<li class="td td-coupon">

								<span class="coupon-title">优惠券</span>
								<select data-am-selected="" id="payCoupon" @change="getCurrentCoupon"
												v-model="currentCoupon">

									<option :value="coupon.amount" v-for="(coupon, index) in couponList"
									>
										{{coupon.amount|showPrice}}
										【消费满{{coupon.minPoint|showPrice}}元可用】
									</option>

								</select>
							</li>
						</div>


					</div>
					<!--含运费小计 -->
					<div class="buy-point-discharge ">
						<p class="price g_price ">
							合计（含运费） <span></span><em class="pay-sum">{{orderPrice|showPrice}}</em>
						</p>
					</div>


				</div>

				<!--信息 -->
				<div class="order-go clearfix">
					<div class="pay-confirm clearfix">
						<div class="box">
							<div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
								<span class="price g_price ">
                                    <span></span> <em class="style-large-bold-red " id="J_ActualFee">{{orderPrice|showPrice}}</em>
											</span>
							</div>

							<div id="holyshit268" class="pay-address">

								<p class="buy-footer-address">
									<span class="buy-line-title buy-line-title-type">寄送至：</span>
									<span class="buy--address-detail">
								   <span class="province" id="pp"></span>省
												<span class="city" id="cc"></span>市
												<span class="dist" id="dd"></span>区
												<span class="street" id="ss"></span>
												</span>
									</span>
								</p>
								<p class="buy-footer-address">
									<span class="buy-line-title">收货人：</span>
									<span class="buy-address-detail">
                                         <span class="buy-user" id="nn"> </span>
												<span class="buy-phone" id="ppp"></span>
												</span>
								</p>
							</div>
						</div>

						<div id="holyshit269" class="submitOrder">
							<div class="go-btn-wrap">
								<a id="J_Go" @click="alipayTradePagePay" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>

			<div class="clear"></div>
		</div>

	</div>

	<div class="footer">
		<div class="footer-hd">
			<p>
				<b>|</b>
				<a href="http://localhost:80/views/view-api/home2.html ">商城首页</a>
				<b>|</b>
				<a href="# ">支付宝</a>
				<b>|</b>
				<a href="# ">物流</a>
			</p>
		</div>
		<div class="footer-bd ">
			<p>
				<a href="# ">合作伙伴</a>
				<a href="# ">联系我们</a>
				<a href="# ">网站地图</a>
			</p>
		</div>
	</div>
</div>
<div class="theme-popover-mask"></div>
<div class="theme-popover">


	<div class="clear"></div>
</div>
</body>


</html>

<script>


	const vue = new Vue({
		el: "#vue_pay",
		data: {
			goodsList: "",
			orderPrice: "",
			goods: "",
			couponList: '',
			currentCoupon: 0,
			isSelect:false,

		},

		filters: {
			showPrice(price) {
				return '￥' + price.toFixed(2)
			}
		},
		//初始化购物车
		methods: {
			//查詢可以使用的優惠券
			coupon() {
				let url = "coupon/payCoupon"
				// 根据session获取用户id
				let userId = sessionStorage.id;
				//訂單縂金額
				let thisObj = this;
				let orderPrice = this.orderPrice;
				let params = {orderPrice: orderPrice, userId: userId}
				postWithParams(url, params, function (date) {
					thisObj.couponList = date;
					let number = Math.max.apply(Math,thisObj.couponList.map(item => { return item.amount }));
					thisObj.currentCoupon=number
					thisObj.getCurrentCoupon();
				})
			},

			//获取实际支付金额
			getCurrentCoupon(e) {
				this.orderPrice = this.goodsList[0].orderPrice
				this.orderPrice -= this.currentCoupon;
				if (parseInt(this.orderPrice) < 0){
					this.orderPrice = 0;
				}
			},

			//支付
			alipayTradePagePay: function () {
				//根据地址栏 获取订单id，
				let WIDout_trade_no = window.location.search.substring(4)
				var WIDtotal_amount = this.orderPrice;

				let url = "http://localhost:80/shop-api/alipayTradePagePay";
				let overview = "购买商品";
				let widDody = "";
				let params = {
					WIDout_trade_no: WIDout_trade_no,
					WIDtotal_amount: WIDtotal_amount,
					WIDsubject: overview,
					WIDbody: widDody
				};
				$.ajax({
					type: "post",
					url: url,
					data: params,
					success: function (resp) {
						window["data"] = resp;
						window.open("http://localhost:80/views/view-api/alipay.html");
					}
				});

				//支付后对于优惠券改为已经使用



			},

			initPay: function () {
				let url = "myCart/initPay"
				let thisObj = this;

				// 根据session获取用户id
				let userId = sessionStorage.id;
				//根据地址栏 获取商品id，
				let orderId = window.location.search.substring(4)
				let params = {orderId: orderId}
				postWithParams(url, params, function (data) {
					thisObj.goodsList = data;
					thisObj.orderPrice = data[0].orderPrice
					thisObj.coupon();
				})

			}
		},

		mounted: function () {
			//页面加载完成，并且vue对象加载完成之后调用
			this.initPay();
		},

	})

	//为页面搜索功能实现功能
	//获取搜索按钮
	let topsearch = document.getElementById("ai-topsearch");
	//搜索按钮绑定点击事件
	topsearch.onclick = function () {
		let searchInput = document.getElementById("searchInput");
		let value = searchInput.value;
		//跳转到详情页,把id带过去
		let openUrl = "http://localhost:80/views/view-api/search.html";
		window.open(openUrl + "?" + value)

	}

	$(function () {
		showAddress();
		OnDisplay();
		showAddressInit();
	});

	function showAddress() {
		$.ajax({
			url: "http://localhost:80/shop-api/showAddress",
			type: "Get",
			data: {"userId": sessionStorage.id},
			success: function (data) {
				let Obj = data;
				let code = Obj.code;
				let List = Obj.data;
				let msg = Obj.msg;

				if (code === 100) {
					for (let i = 0; i < List.length; i++) {
						let listElement = List[i];
						let stringify = JSON.stringify(listElement);
						/*console.log("111");
						console.log(stringify);*/
						$("#showAdd").append("<li class=\"user-addresslist\">\n" +
							"                            <div class=\"address-left\">\n" +
							"                                <div class=\"user DefaultAddr\">\n" +
							"                                            <span class=\"buy-address-detail\">\n" +
							"                       <span class=\"buy-user\">" + List[i].name + " </span>\n" +
							"                                            <span class=\"buy-phone\">" + List[i].phone + "</span>\n" +
							"                                            </span>\n" +
							"                                </div>\n" +
							"                                <div class=\"default-address DefaultAddr\">\n" +
							"                                    <span class=\"buy-line-title buy-line-title-type\">收货地址：</span>\n" +
							"                                    <span class=\"buy--address-detail\">\n" +
							"                                       <span class=\"province\">" + List[i].province + "\n" +
							"                                            <span class=\"city\">" + List[i].city + "\n" +
							"                                            <span class=\"dist\">" + List[i].dist + "\n" +
							"                                            <span class=\"street\">" + List[i].address + "</span>\n" +
							"                                            </span>\n" +
							"    \n" +
							"                                    </span>\n" +
							"                                </div>\n" +
							"                                <ins class=\"deftip hidden\">默认地址</ins>\n" +
							"                            </div>\n" +
							"                            <div class=\"address-right\">\n" +
							"                                <span class=\"am-icon-angle-right am-icon-lg\"></span>\n" +
							"                            </div>\n" +
							"                            <div class=\"clear\"></div>\n" +
							"    \n" +
							"                            <div class=\"new-addr-btn\">\n" +
							"                                <a href=\"#\" onclick=\"addressBuy(" + List[i].id + ");\")>选中地址</a>" +
							"                                <span class=\"new-addr-bar\"></span>\n" +
							"                                <span class=\"new-addr-bar\">|</span>\n" +
							"                                <a href=\"javascript:void(0);\" onclick=\"delClick(" + List[i].id + ");\">删除</a>\n" +
							"                            </div>\n" +
							"    \n" +
							"                        </li>")
					}
				}
			}
		})
	}

	function delClick(id) {
		console.log(id);
		$.ajax({
			url: "http://localhost:80/shop-api/delAddress",
			type: "Post",
			data: {"userId": sessionStorage.id, "id": id},
			success: function (data) {
				let Obj = JSON.parse(data);
				let Rcode = Obj.code;
				let Rmsg = Obj.msg;
				let Rdata = Obj.data;
				if (Rcode === 101) {
					alert(Rmsg);
					return;
				}
				alert("删除成功！");
				location.reload()
			}
		})
	}

	function showAddressInit() {
		$.ajax({
				url: "http://localhost:80/shop-api/showAddress",
				type: "Get",
				data: {"userId": sessionStorage.id},
				success: function (data) {
					let Obj = data;
					let code = Obj.code;
					let List = Obj.data;
					let msg = Obj.msg;
					var listElement = List[0];
					$("#pp").html(listElement.province)
					$("#cc").html(listElement.city)
					$("#dd").html(listElement.dist)
					$("#nn").html(listElement.name)
					$("#ppp").html(listElement.phone)
					$("#aa").html(listElement.address)
				}
			}
		)
	}


	function addressBuy(id) {
		$.ajax({
				url: "http://localhost:80/shop-api/selectAddressById",
				type: "Get",
				data: {"id": id},
				success: function (data) {
					let Obj = data;
					let code = Obj.code;
					let address = Obj.data;
					let msg = Obj.msg;
					console.log(address);
					$("#pp").html(address.province)
					$("#cc").html(address.city)
					$("#dd").html(address.dist)
					$("#nn").html(address.name)
					$("#ppp").html(address.phone)
					$("#aa").html(address.address)
				}
			}
		)
	}

</script>